<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类目统计</title>
    <link rel="stylesheet" href="/css/elementui.css">
    <link rel="stylesheet" href="/css/style.css">
<body>


<div id="admin" style="width: 600px;height: 400px"></div>
<div id="app">

    <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData()">
    </el-date-picker>

    <el-table
            :data="tableData"
            border
            style="width:100%">
        <el-table-column
                prop="categoryName"
                label="一级分类"
                width="200">

        </el-table-column>

        <el-table-column
                prop="num"
                label="数量"
                width="200">

        </el-table-column>
        <el-table-column
                label="数量比例"
                width="200">
            <template slot-scope="scope">
                {{Math.round(scope.row.num*100/numSum)}}%
            </template>

        </el-table-column>


        <el-table-column
                prop="money"
                label="销售额"
                width="200">

        </el-table-column>

        <el-table-column
                label="金额比例"
                width="200">
            <template slot-scope="scope">
                {{Math.round(scope.row.money*100/moneySum)}}%
            </template>
        </el-table-column>

    </el-table>

</div>


</body>
<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.common.min.js"></script>

<script>

    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                dateRange: [],
                numSum:0,
                moneySum:0
            }
        },
        methods: {
            fetchData() {
                let date1 = this.dateRange[0].Format("yyyy-MM-dd");
                let date2 = this.dateRange[1].Format("yyyy-MM-dd");
                axios.get(`/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`)
                    .then(response => {
                        this.tableData = response.data;
                        let legendData = [];
                        let numData = [];
                        let moneyData = [];
                        for (let i = 0; i < this.tableData.length; i++) {
                            legendData.push(this.tableData[i].categoryName);
                            numData.push({name: this.tableData[i].categoryName, value: this.tableData[i].num});
                            moneyData.push({name: this.tableData[i].categoryName, value: this.tableData[i].money});
                            this.numSum+=this.tableData[i].num;
                            this.moneySum+=this.tableData[i].money;
                        }
                        let myChart = echarts.init(document.getElementById("admin"));
                        let option = {
                            title: {
                                text: '商品类目销售分析',
                                subtext: '',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a}</br>{b}:{c}({d}%)"
                            },
                            legend: {
                                orient: 'scroll',
                                left: 'left',
                                right: 10,
                                top: 20,
                                bottom: 20,
                                data: legendData,
                                selected: legendData
                            },
                            series: [{
                                    name: '销售量',
                                    type: 'pie',
                                    radius: '35%',
                                    center: ['35%', '50%'],
                                    data: numData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffSetX: 0,
                                            shadowColor: 'rgba(0,0,0,0.5)'
                                        }
                                    }
                                },
                                {
                                    name:'销售额',
                                    type: 'pie',
                                    radius: '35%',
                                    center: ['80%', '50%'],
                                    data: moneyData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffSetX: 0,
                                            shadowColor: 'rgba(0,0,0,0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    });
            }
        }
    })
    ;


</script>
</html>